<template>
  <div v-if="songList!=''"  class="audioPlay">
      <h3>{{songList.name}}</h3>
      <p>演唱者：{{songList.ar| filterName}}</p>
      <img :src="songList.al.picUrl" alt="">
      <audio :src="musicUrl" controls autoplay></audio>
  </div>
</template>

<script>
import { getSongUrl, getSongIfon } from '../api/index'
// import axios from 'axios'
// import {getSongUrl} from ''
export default {
    filters:{
        filterName(arr){
            return arr.map(item=>{
                return item.name
            }).join(' & ')
        }
    },
    data() {
        return {
            musicUrl:'',
            songList:''
        }
    },
    created() {
        // 获取歌曲Url
        getSongUrl({id:this.$route.query.id}).then(res=>{
            this.musicUrl=res.data.data[0].url
            // window.console.log(res);
        })
        // axios({
        //     url:'https://autumnfish.cn/song/url',
        //     params:{
        //         id:this.$route.query.id,
        //         dsa:Math.random()*999
        //     }
        // }).then(res=>{
        //     this.musicUrl=res.data.data[0].url
        //     // window.console.log(res);
        // })
        // 获取歌曲详情
        getSongIfon({ids:this.$route.query.id}).then(res=>{
            this.songList=res.data.songs[0]
            window.console.log(res);
        })
        // axios({
        //     url:"https://autumnfish.cn/song/detail",
        //      params:{
        //         ids:this.$route.query.id,
        //         sas:Math.random()*999
        //     }
        // }).then(res=>{
        //     this.songList=res.data.songs[0]
        //     window.console.log(res);
        // })
    },
}
</script>

<style>
    .audioPlay{
        width: 700px;
        margin: 0 auto;
        text-align: center;
    }
    .audioPlay p{
        margin: 15px 0;
    }
    .audioPlay img,
    .audioPlay audio{
        width: 100%;
    }
</style>